<template>
  <section class="ring-wrapper" :ref="id" :id="id"></section>
</template>

<script>
import echarts from "./index";
export default {
  props: ["id", "echartsData"],
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.renderEchart();
    });
  },
  watch: {
    echartsData: {
      handler() {
        this.$nextTick(() => {
          this.renderEchart();
        });
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    renderEchart() {
      //2.初始化
      const chart = echarts.init( document.getElementById(this.id));
      const option = {
        series: [
          // 外圈
          {
            type: 'gauge',
            min: 0,
            max: 100,
            radius: '90%',
            startAngle: -45,
            endAngle: -405,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true,
              splitNumber:8,
              length:7,
              lineStyle:{
                color:'#2481DF',
                width:3
              }
            },
            axisLabel: {
              show: false
            },
            anchor: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              offsetCenter: [0, '15'],
              valueAnimation: true,
              formatter: '{value}\n%',
              color: '#20DEBC',
              fontSize: 18
            },
            data: this.echartsData.avg,
          },
          // 中间刻度1
          {
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 14,
            radius: '60%',
            startAngle: -45,
            endAngle: -405,
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show:false,
            },
            axisLabel: {
              show: false
            },
            anchor: {
              show: false
            },
            pointer: {
              show: false
            },
            data: this.echartsData.one,
            progress:{
              show:true,
              width:5,
              itemStyle:{
                color:"#20DEBC"
              },
            },
            detail: {
              show: false
            },
            title: {
              show: false
            }
          },
          //刻度2
          {
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 14,
            radius: '50%',
            startAngle: -45,
            endAngle: -405,
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show:false,
            },
            axisLabel: {
              show: false
            },
            anchor: {
              show: false
            },
            pointer: {
              show: false
            },
            data: this.echartsData.two,
            progress:{
              show:true,
              width: 5,
              itemStyle:{
                color:"#DEB820"
              },
            },
            detail: {
              show: false,
            },
            title: {
              show: false
            }
          }
        ]
      };

      // setInterval(function () {
      //   chart.setOption(option, true);
      // }, 1000);
      chart.setOption(option, true);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          chart.resize();
        });
      });
    },
  },
};
</script>

<style lang="scss">
.echartBox-wrapper {
  width: 100%;
  height: 100%;
}
</style>